<template>
  <div class="login" v-if="login">
    <div class="i_login" v-if="ishow">
      <div class="title"> 浪淘商户登录</div>
        <el-input placeholder="请输入账号" prefix-icon="el-icon-user-solid" v-model="input1"></el-input>
        <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" show-password v-model="input2"></el-input>
        <div class="i_bottom">
          <el-button type="primary" @click='log_in'>登录</el-button>
          <el-button type="info" @click='register' plain>注册</el-button>
        </div>
    </div>
    <div class="register" v-if="!ishow">
      <div class="title">浪淘商户注册</div>
      <el-input placeholder="请输入账号" prefix-icon="el-icon-user-solid" v-model="r_input1"></el-input>
      <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" show-password v-model="r_input2"></el-input>
      <el-input placeholder="请确认密码" prefix-icon="el-icon-lock" show-password v-model="r_input3"></el-input>
      <el-input placeholder="商户名称"  v-model="r_input3"></el-input>
      <el-input placeholder="统一社会信用编码"  v-model="r_input3"></el-input>
      <el-input placeholder="法人名称"  v-model="r_input3"></el-input>
      <el-input placeholder="邀请码"  v-model="r_input3"></el-input>
      <div class="agreement">
        <el-checkbox v-model="checked">是否同意会员注册协议</el-checkbox>
      </div>
      <el-button @click='regBtn'  type="primary">注册</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        input1: '',
        input2: '',
        r_input1: '',
        r_input2: '',
        r_input3: '',
        checked:true,
        ishow:true,
        login:true
      }
    },
    methods: {
      log_in(){
         this.login = false;
      },
          register(){//跳转注册
             this.ishow = false;
          },
          regBtn(){//提交注册
            this.ishow = true;
          }
    }
  }
</script>

<style scoped>
  .login {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: #3A8EE6;
    background-image: url(../assets/a.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center 0;
    z-index: 999;
    text-align: center;
  }

  .i_login {
    width: 400px;
    height: 300px;
    position: absolute;
    background: rgba(0, 0, 0, .5);
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -150px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 4px;
  }

  .i_login .el-input {
    width: 80%;
    margin-bottom: 30px;
  }

  .i_bottom {
    width: 80%;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
  }

  .el-button {
    padding: 11.5px 55px;
  }

  .title {
    line-height: 70px;
    color: white;
    letter-spacing: 2px;
  }

  /*
  *Register
  */
  .register {
    width: 400px;
    height: 600px;
    position: absolute;
    background: rgba(0, 0, 0, .5);
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -300px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 4px;
  }
 .register .el-input {
    width: 80%;
    margin-bottom: 10px;
  }
  .agreement{
    width: 80%;
    margin: 0 auto;
    text-align: left;
    margin-bottom: 20px;
  }
</style>
